import {
  PageContainer,
  ProForm,
  ProFormColorPicker,
  ProFormDigit,
  ProFormGroup,
  ProFormItem,
  ProFormList,
  ProFormMoney,
  ProFormText,
} from '@ant-design/pro-components';

import MyUpload from '@/components/MyUpload';
import { editGoods, findByBackId, findByGoodsAngent } from '@/services/goods';
import ProCard from '@ant-design/pro-card';
import { useMount, useRequest } from 'ahooks';
import { Space } from 'antd';
import BraftEditor, { EditorState } from 'braft-editor';
import { useState } from 'react';
import { useParams } from 'react-router';
import './editor.less';
const Edit = () => {
  const [form] = ProForm.useForm();
  const params = useParams();
  const [content, setContent] = useState<string>('');
  const [editorState, setEditorState] = useState<EditorState>();
  const {
    runAsync: fetchByGoodsInfo,
    data: info,
    loading,
  } = useRequest(findByBackId, {
    debounceWait: 100,
    manual: true,
  });
  //goodsByListPrice
  const { runAsync: fetchByGoodsByListPrice } = useRequest(findByGoodsAngent, {
    debounceWait: 100,
    manual: true,
  });

  useMount(async () => {
    // @ts-ignore
    let id = params?.id || 0;
    if (id) {
      fetchByGoodsInfo(id).then((res) => {
        console.log(res);
        setContent(res?.content);
        setEditorState(BraftEditor.createEditorState(res?.content));
        //   BraftEditor.createEditorState(content)
      });
    }
    fetchByGoodsByListPrice(id).then((res) => {
      console.log(res);
      form.setFieldValue('agents', res);
    });
  });
  const handleChange = (editorState: { toHTML: () => any }) => {
    let html = editorState.toHTML();
    console.log(html);
    setEditorState(editorState);
    setContent(html);
    //   form.setFieldValue('content', html);
  };
  return (
    <PageContainer title={'基本信息'} loading={loading}>
      <ProForm<API.Goods>
        initialValues={info}
        form={form}
        loading={loading}
        onFinish={(values) => {
          return new Promise((resolve, reject) => {
            editGoods(values)
              .then((res) => {
                resolve(true);
              })
              .catch((err) => {
                reject(err);
              });
          });
        }}
      >
        <Space
          size={'small'}
          style={{ backgroundColor: 'transparent' }}
          direction={'vertical'}
        >
          <ProCard
            title={'编辑产品'}
            headerBordered={true}
            loading={loading}
            bordered={true}
          >
            <ProFormText hidden={true} width="md" name="id" />
            <ProFormGroup colProps={{ md: 12, xl: 8 }}>
              <ProFormText
                colProps={{ md: 12, xl: 8 }}
                name="name"
                required={true}
                label="产品名称"
              />
              <ProFormText
                colProps={{ md: 12, xl: 8 }}
                name="nameUg"
                label="维语名称"
              />
              <ProFormText
                colProps={{ md: 12, xl: 8 }}
                name="goodNumber"
                label="产品型号"
              />
            </ProFormGroup>
            <ProFormGroup>
              <ProFormDigit
                colProps={{ md: 12, xl: 8 }}
                min={0}
                name="quantity"
                required={true}
                label="数量"
              />
              <ProFormDigit
                colProps={{ md: 12, xl: 8 }}
                min={0}
                name="inventory"
                label="库存数量"
              />
              <ProFormColorPicker
                colProps={{ md: 12, xl: 8 }}
                name="colors"
                label="产品彩色"
                dataFormat={'hex'}
              />
            </ProFormGroup>
          </ProCard>
          <ProCard
            title={'图片信息'}
            loading={loading}
            headerBordered={true}
            bordered={true}
          >
            <ProFormGroup>
              <ProFormItem label={'图标'} name={'imageId'}>
                <MyUpload
                  type={4}
                  onChange={(imageId) => {
                    form.setFieldValue('imageId', imageId);
                  }}
                />
              </ProFormItem>
              <ProFormItem label={'多图标'} name={'imageIds'}>
                <MyUpload
                  multis={true}
                  type={4}
                  onChange={(imageId) => {
                    form.setFieldValue('imageIds', imageId);
                  }}
                />
              </ProFormItem>
            </ProFormGroup>
          </ProCard>

          <ProCard
            title={'价格信息'}
            loading={loading}
            headerBordered={true}
            bordered={true}
          >
            <ProFormGroup>
              <ProFormMoney
                name="marketPrice"
                required={true}
                label="市场价格"
              />
              <ProFormMoney name="retailPrice" label="零售价" />
            </ProFormGroup>
            <ProFormList
              name={'agents'}
              itemContainerRender={(doms) => {
                return (
                  <Space size={'small'} grid={true}>
                    {doms}
                  </Space>
                );
              }}
              creatorButtonProps={false}
              deleteIconProps={false}
              copyIconProps={false}
            >
              {(f, index, action) => {
                console.log(f, index, action);
                return (
                  <>
                    <ProFormText disabled={true} name="name" key="name" />
                    <ProFormText hidden={true} name="id" key="id" />
                    <ProFormText hidden={true} name="agentId" key="agentId" />
                    <ProFormMoney name="price" placeholder={`价格`} />
                    <ProFormMoney name="newPrice" placeholder={`新价格`} />
                    <ProFormMoney name="activePrice" placeholder={`活动价格`} />
                  </>
                );
              }}
            </ProFormList>
          </ProCard>
          <ProCard
            title={'备注信息'}
            loading={loading}
            headerBordered={true}
            bordered={true}
          >
            <BraftEditor
              lineHeights={[1, 2]}
              value={editorState}
              onChange={handleChange}
            />
          </ProCard>
        </Space>
      </ProForm>
    </PageContainer>
  );
};

export default Edit;
